<template>
  <div class="flex justify-center items-center">
    <button
      @click="show = true"
      class="border-2 flex justify-center items-center border-white text-2xl font-bold px-4 py-1 rounded-lg bg-yellow-400"
    >
      <div
        class="text-yellow-300 mr-2 flex justify-center items-center rounded-2xl bg-red-500 w-10 h-10 inline-block"
      >
        +
      </div>
      添加<span class="text-blue-600">收款码</span>
    </button>
  </div>

  <div class="mt-4">
    <van-list
      v-model:loading="loading"
      @load="loadData"
      :finished="finished"
      finished-text="没有更多了"
    >
      <CollectionItem v-for="item in list" :key="item.id" :item="item" @edit="ok" />
    </van-list>
  </div>

  <addCollectionModal @close="show = false" @confirm="ok" :show="show" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import addCollectionModal from '../modal/addCollectionModal.vue'
import CollectionItem from './collectionItem.vue'
import { getCollectionIndexApi } from '@/apis/collection'

const show = ref(false)
const list = ref([])
const loading = ref(false)
const finished = ref(false)
const page = ref(1)

function loadData() {
  loading.value = true
  getCollectionIndexApi({ page: page.value, pageSize: 100 })
    .then((res) => {
      if (res.list.length > 0) {
        list.value = res.list
        page.value++
      } else {
        finished.value = true
      }
    })
    .finally(() => {
      loading.value = false
    })
}

function ok() {
  getCollectionIndexApi({ page: 1, pageSize: 100 }).then((res) => {
    list.value = res.list
  })
  show.value = false
}
</script>
<style scoped>
.delete-button {
  height: 100%;
}
</style>
